<script setup>
import { onMounted,ref } from 'vue';
import { ElMessage } from "element-plus";
import { commentPageApi,delcommentByIdApi,updatecommentApi } from "@/apis/comments";
import MenuItem from "@/components/MenuItem.vue";


// 评论
// 是否开启按钮删除和修改
const commentDel = ref(true);
const commentUpdate = ref(true);
const commentSelect = ref();
// 修改弹窗
const commentDialog = ref(false);
// 修改管理员信息
const updateCommentInfo = ref()
// 评论分页
const commentData = ref();
const commentTotal = ref();
const currentPage = ref(1);

// 评论查询字段
const commentParam = ref({
  userName: "",
  comment: "",
  workId: "",
});



onMounted(() => {
  commentInit();
})

const commentInit = async () => {
  const commentsRes = await commentPageApi();
  commentData.value = commentsRes.data.records;
  commentTotal.value = commentsRes.data.total;
};

const commentChange = async (e) => {
  currentPage.value = e;
  const res = await commentPageApi({ currentPage: e }, commentParam.value);
  commentData.value = res.data.records;
  commentTotal.value = res.data.total;
};

const commentSearch = async () => {
  const res = await commentPageApi(null, commentParam.value);
  commentData.value = res.data.records;
  commentTotal.value = res.data.total;
};

// 管理员勾选
const commentSelectionChange = (e) => {
  commentSelect.value = e;
  if (e.length > 0) {
    // 可以进行删除和修改
    commentDel.value = false;
    if (e.length == 1) {
      commentUpdate.value = false;
    } else {
      commentUpdate.value = true;
    }
  }
  if (e.length == 0) {
    commentDel.value = true;
    commentUpdate.value = true;
  }
};

// 执行删除按钮
const commentDelBtn = async () => {
  for (let i = 0; i < commentSelect.value.length; i++) {
    const commentId = commentSelect.value[i].commentId;
    // 调用删除接口
    const res = await delcommentByIdApi({ commentId: commentId });
    ElMessage.success(res.msg);
  }
  commentDel.value = true;
  commentInit();
};

// 出现修改弹窗
const commentUpdateBtn =  () => {
  commentDialog.value = true;
  // 进行深拷贝不修改原来的gender
  updateCommentInfo.value = JSON.parse(JSON.stringify(commentSelect.value[0]));
};

// 执行修改按钮
const commentUpdateConfirm = async () => {
  // 调用修改接口
  updateCommentInfo.value.avatarImg = null
  commentDialog.value = false;
  const res = await updatecommentApi(updateCommentInfo.value);
  commentInit();
  ElMessage.success(res.msg);
}
</script>
<template>
<MenuItem class="pageIndex">
        <template #search>
          <div class="search-container">
            <el-input
              v-model="commentParam.userName"
              style="width: 400px; height: 40px"
              placeholder="请输入用户名称"
              clearable
            />
            <el-input
              v-model="commentParam.workId"
              style="width: 400px; height: 40px"
              placeholder="请输入作品ID"
              clearable
            />
            <el-input
              v-model="commentParam.comment"
              style="width: 400px; height: 40px"
              placeholder="请输入评论内容"
              clearable
            />
            <a-button
              type="primary"
              @click="commentSearch"
              style="width: 150px; height: 40px"
              >查询</a-button
            >
          </div>
        </template>
        <template #action>
          <a-button
            type="primary"
            :disabled="commentDel"
            :loading="loading"
            @click="commentDelBtn"
            style="margin: 0px 5px"
            >删除</a-button
          >
          <a-button
            type="primary"
            :disabled="commentUpdate"
            :loading="loading"
            @click="commentUpdateBtn"
            style="margin: 0px 5px"
            >修改</a-button
          >
        </template>
        <template #table>
          <el-table :data="commentData" style="width: 100%; height: 100%"
           @selection-change="commentSelectionChange"
          >
            <el-table-column type="selection"/>
            <el-table-column property="avatarImg" label="用户头像" width="200">
              <template #default="scope">
                <img
                  :src="scope.row.avatarImg"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column property="userName" label="用户名称" width="200">
            </el-table-column>
            <el-table-column
              property="commentContent"
              label="评论内容"
              width="250"
            />
            <el-table-column property="workId" label="作品ID" width="300" />
            <el-table-column property="createTime" label="创建时间" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="commentTotal"
            :current-page="currentPage"
            @current-change="commentChange"
          />
        </template>
      </MenuItem>
      <el-dialog v-model="commentDialog" title="作品评论信息" width="500" draggable>
        <el-form
          label-width="auto"
          :model="updateCommentInfo"
        >
          <el-form-item label="评论内容：">
            <el-input v-model="updateCommentInfo.commentContent" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="commentDialog = false">取消</el-button>
            <el-button type="primary" @click="commentUpdateConfirm">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>
<style scoped>

</style>
